<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>校园应用系统</title>
  <link rel="stylesheet" th:href="@{/layui/css/css.css}">
  <style>
    .layui-table-view .layui-form-checkbox[lay-skin=primary] i {
      margin-top:8px;
    }
  </style>
  <title>Title</title>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">校园应用系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>

      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img th:src="@{/images/touxiang.jpg}" class="layui-nav-img">
          dormitory
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">个人资料</a></dd>
          <dd><a href="">设置</a></dd>
          <dd><a th:href="@{/loginJsp}">退出系统</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item">
          <a class="" href="javascript:;">学生管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/student}">学生信息管理</a></dd>
            <dd><a href="javascript:;">学生详细信息管理</a></dd>
            <dd><a href="javascript:;">举报管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">班级管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/teacherJsp}">班级信息管理</a></dd>
            <dd><a href="javascript:;">班级详细信息管理</a></dd>
            <dd><a href="">举报管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">班级管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/teacherJsp}">班级信息管理</a></dd>
            <dd><a href="javascript:;">班级详细信息管理</a></dd>
            <dd><a href="">举报管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item  layui-nav-itemed">
          <a href="javascript:;">宿舍管理</a>
          <dl class="layui-nav-child">
            <dd><a  th:href="@{/dormitoryHtml}">宿舍信息管理</a></dd>
            <dd><a href="javascript:;">宿舍详细信息管理</a></dd>
            <dd><a href="">举报管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">教室管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/classroomJsp}">教室信息管理</a></dd>
            <dd><a href="javascript:;">教室详细信息管理</a></dd>
            <dd><a href="">举报管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">密码修改</a></li>
        <li class="layui-nav-item"><a th:href="@{/loginJsp}">退出系统</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>宿舍基本信息管理</legend>
    </fieldset>
    <div class="demoTable">
      <div>
        <label class="layui-form-label">详细位置：</label>
        <div style="display: inline;margin-left: 10px">
          <select name="istregion" id="region" class="layui-select">
            <option value="">请选择区域</option>
          </select>
        </div>
        <span></span>
        <div style="display: inline;margin-left: 50px">
          <select name="istbuildingNo" id="buildingNo" class="layui-select" >
            <option value="">请选择楼号</option>
          </select>
        </div>
        <span></span>
        <div style="display: inline;margin-left: 50px">
          <select name="istbuildingFloor" id="buildingFloor" class="layui-select">
            <option value="">请选择楼层</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">宿舍名称：</label>
        <div class="layui-input-inline" style="width: 120px">
          <input type="text" name="dormitoryName" id="dormitoryName" lay-verify="required" placeholder="宿舍名称" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">管理员：</label>
        <div class="layui-input-inline " style="width: 120px">
          <input type="text" name="dormSupervisor" lay-verify="required" id="dormSupervisor" placeholder="管理员" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">床位数量：</label>
        <div class="layui-input-inline " style="width: 120px">
          <input type="text" name="bedNumber" lay-verify="required" id="bedNumber" placeholder="床位数量" autocomplete="off" class="layui-input">
        </div>
        <button  class="layui-btn" data-type="reload">查询</button>
      </div>

      <table class="layui-hide" id="demo" lay-filter="test"></table>



      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
      </script>

    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->
      校园应用系统
    </div>
  </div>
  <script th:src="@{/layui/layui.js}"></script>
  <script th:src="@{/thymeleaf/dormitory.js}"></script>
  <script>

    // 使用es6的padStart()方法来补0
    function getYMDHMS (timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      const month = (time.getMonth() + 1).toString().padStart(2, '0')
      const date = (time.getDate()).toString().padStart(2, '0')
      const hours = (time.getHours()).toString().padStart(2, '0')
      const minute = (time.getMinutes()).toString().padStart(2, '0')
      const second = (time.getSeconds()).toString().padStart(2, '0')

      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second;
    }
    //JS
    layui.use(['element', 'layer', 'util'], function(){
      var element = layui.element
              ,layer = layui.layer
              ,util = layui.util
              ,$ = layui.$;

      //头部事件
      util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function(othis){
          layer.msg('展开左侧菜单的操作', {icon: 0});
        }
        ,menuRight: function(){
          layer.open({
            type: 1
            ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
            ,area: ['260px', '100%']
            ,offset: 'rt' //右上角
            ,anim: 5
            ,shadeClose: true
          });
        }
      });

    });

    layui.config({
      version: '1623988781494' //为了更新 js 缓存，可忽略
    });
    layui.use('form', function(){
      var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

      //……

      //如果你的 HTML 是动态生成的，自动渲染就会失效
      //因此你需要在相应的地方，执行下述方法来进行渲染
      form.render('select');
    });
    layui.use('laydate', function(){
      var laydate = layui.laydate;

      //执行一个laydate实例
      laydate.render({
        elem: '#istBirthday' //指定元素
      });
    });
  </script>
<!-- 添加界面 -->
  <div id="insertPage" style="display: none">
    <div style="margin-top: 20px">
      <label class="layui-form-label">位置：</label>
      <div style="display: inline">
        <select name="inarea" id="inarea" class="layui-select">
          <option value="">请选择区域</option>
        </select>
      </div>
      <span>——</span>
      <div style="display: inline">
        <select name="inbuildingNo" id="inbuildingNo" class="layui-select" >
          <option value="">请选择楼号</option>
        </select>
      </div>
      <span>——</span>
      <div style="display: inline">
        <select name="inbuildingFloor" id="inbuildingFloor" class="layui-select">
          <option value="">请选择楼层</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍名称：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="indormitoryName" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">床位数量：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="inbedNumber" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍主管ID：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="indormSupervisorId" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍主管：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="indormSupervisor" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍状态：</label>
      <select style="width: 100px;"name="inuseStatus" id="inuseStatus" lay-verify="required" lay-search="" class="layui-select">
        <option value=''>请选择</option>
        <option value='0'>正常</option>
        <option value='1'>空闲</option>
        <option value='2'>保留</option>
      </select>
    </div>
    <button class="layui-btn" id="insertdormitory" style="margin-left: 110px;">确认添加</button>
  </div>

  <!-- 修改界面 -->
  <div id="updatePage" style="display: none">
    <div class="layui-form-item">
      <label class="layui-form-label">区域：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="uparea" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">楼号：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="upbuildingNo" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">楼层：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="upbuildingFloor" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍名称：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="updormitoryName" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">床位数量：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="upbedNumber" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍主管ID：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="updormSupervisorId" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍主管：</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="updormSupervisor" lay-verify="title" autocomplete="off" value="" class="layui-input" style="width: 200px" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">宿舍状态：</label>
      <select style="width: 100px;"name="inuseStatus" id="upuseStatus" lay-verify="required" lay-search="" class="layui-select">
        <option value=''>请选择</option>
        <option value='0'>正常</option>
        <option value='1'>空闲</option>
        <option value='2'>保留</option>
      </select>
    </div>
    <button class="layui-btn" id="updatedormitory" style="margin-left: 110px;">确认修改</button>
  </div>
  <%--详细信息--%>
  <div id="detailedInformation" style="display: none">
  <div class="layui-form-item">
    <label class="layui-form-label">区域：</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="stuarea" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">楼号：</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="stubuildingNo" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">楼层：</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="stubuildingFloor" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">宿舍名称：</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="studormitoryName" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">床位数量：</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="stubedNumber" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">宿舍主管ID：</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="studormSupervisorId" lay-verify="title" autocomplete="off" value="" class="layui-input" style="margin-top: 15px;width: 200px" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">宿舍主管：</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="studormSupervisor" lay-verify="title" autocomplete="off" value="" class="layui-input" style="width: 200px" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">宿舍状态：</label>
    <select style="width: 100px;"name="inuseStatus" id="stuuseStatus" lay-verify="required" lay-search="" class="layui-select">
      <option value=''>请选择</option>
      <option value='0'>正常</option>
      <option value='1'>空闲</option>
      <option value='2'>保留</option>
    </select>
  </div>
    <button class="layui-btn" id="insertStudent" style="margin-left: 110px;">添加学生</button>
    <button class="layui-btn" id="seeStudent" style="margin-left: 30px;">查看学生</button>
  </div>
</div>
</body>
</html>
